<template>
  <div class="app-container">

    <div class="section-box">
      <div class="payin-forecast-title mb20">{{$t('payinFD.payinForecastTitle')}}</div>

      <el-table v-loading="loading"
        :data="dataList">
        <!-- <el-table-column type="selection"
        min-width="55"
        align="center" /> -->
        <el-table-column :label="$t('payinFD.exchangeName')"
          align="center"
          prop="exchangeName"
          min-width="160"
          show-overflow-tooltip />
        <el-table-column :label="$t('payinFD.predictionDate')"
          align="center"
          prop="predictionDate"
          min-width="160" />
        <el-table-column :label="$t('payinFD.amount')"
          align="center"
          prop="amount"
          min-width="120" />
        <el-table-column :label="$t('payinFD.deadline')"
          align="center"
          prop="deadline"
          min-width="160"
          show-overflow-tooltip />
        <el-table-column :label="$t('common.createBy')"
          align="center"
          prop="createBy"
          min-width="160"
          show-overflow-tooltip />
        <el-table-column :label="$t('common.createTime')"
          align="center"
          prop="createTime"
          min-width="180">
          <template slot-scope="scope">
            <span>{{ parseTime(scope.row.createTime) }}</span>
          </template>
        </el-table-column>
        <el-table-column :label="$t('common.updateBy')"
          align="center"
          prop="updateBy"
          min-width="160"
          show-overflow-tooltip />
        <el-table-column :label="$t('common.updateTime')"
          align="center"
          prop="updateTime"
          min-width="180">
          <template slot-scope="scope">
            <span>{{ parseTime(scope.row.updateTime) }}</span>
          </template>
        </el-table-column>
        <el-table-column :label="$t('common.remark')"
          prop="remark"
          min-width="160"
          show-overflow-tooltip />
        <!-- <el-table-column :label="$t('common.controls')"
          align="center"
          class-name="small-padding fixed-width"
          fixed="right"
          min-width="180">
          <template slot-scope="scope">
            <el-button size="mini"
              type="text"
              icon="el-icon-view"
              @click="handleView(scope.row)">{{$t('common.view')}}</el-button>
          </template>
        </el-table-column> -->
      </el-table>

      <pagination v-show="total > 0"
        :total="total"
        :page.sync="queryParams.pageNum"
        :limit.sync="queryParams.pageSize"
        @pagination="getList" />
    </div>

  </div>
</template>

<script>
import {
  forecastDetail
} from "@/api/transaction/payinForecastData.js";

export default {
  name: "payinForecastData",
  data () {
    return {
      // 遮罩层
      loading: true,
      // 总条数
      total: 0,
      // 角色表格数据
      dataList: [],
      // 日期范围
      dateRange: [],
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        exchangeId: null,
        predictionDate: null
      },

    };
  },
  created () {
    this.queryParams.exchangeId = this.$route.query.exchangeId
    this.queryParams.predictionDate = this.$route.query.predictionDate
    this.getList();
  },
  methods: {
    /** 查询列表 */
    getList () {
      this.loading = true;
      forecastDetail(this.queryParams).then(
        (response) => {
          this.dataList = response.rows;
          this.total = response.total;
          this.loading = false;
        }
      );
    },

  },
};
</script>

<style scoped>
.payin-forecast-title {
  font-size: 18px;
  color: #606266;
  font-weight: bold;
}
</style>
